// 跑马灯
import Marquee from "react-fast-marquee";
import style from "./ImageMarquee.module.css";

// 图片
const logos = [
  'https://cdn.dancf.com/fe-assets/20240326/6ce218c2f66fa6a3798cd5680419f94e.png',
  'https://cdn.dancf.com/fe-assets/20240326/4de240fe4534236f974e540e063e76d9.png',
  'https://cdn.dancf.com/fe-assets/20240326/a9ad647588bf921ea2f40cc4c96d31b3.png',
  'https://cdn.dancf.com/fe-assets/20240326/26a91384853dfbdb6df0dc3140929843.png',
  'https://cdn.dancf.com/fe-assets/20240326/bf1fd26d1a1e1792032d00c2daa0cce7.png'
];


const ImageMarquee = () => {
  return (
    <div className={style.easing}>
      <div className={style.blurMask}>
        {logos.map((logo, index) => (
          <Marquee key={index}
            gradient={true}
            speed={50}
            gradientWidth={400}
            direction={index % 2 === 0 ? 'right' : 'left'}>
            <div className={style.marqueeContainer}>
              <img src={logo} alt={`logo-${index}`} className={style.marqueeLogo} />
            </div>
          </Marquee>
        ))}
      </div>
    </div>
  );
};

export default ImageMarquee;